import { Button, Card, Checkbox, Form, InputNumber, Select, DatePicker, TimePicker, Table, Tag, Affix, message } from 'antd';
import { connect } from 'umi';
import React, { useEffect, useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import db from '@/utils/localstorage';
import moment from 'moment';
import styles from './style.less';
const format = 'HH';
const FormItem = Form.Item;
const TimeTemp = '2022-08-17';
const SavePrivate = props => {
  const { dispatch, submitting, shopList, courseList, coachList, classTableInfoList } = props;
  const [form] = Form.useForm();
  const [privateClassKeys, setPrivateClassKeys] = useState([]);

  const [privateClassValueOne2One, setPrivateClassValueOne2One] = useState("");
  const [privateClassValueOne2Two, setPrivateClassValueOne2Two] = useState("");
  // const [privateClassValueOne2Three, setPrivateClassValueOne2Three] = useState("");

  const [privateClassSingleValueOne2One, setPrivateClassSingleValueOne2One] = useState({});
  const [privateClassSingleValueOne2Two, setPrivateClassSingleValueOne2Two] = useState({});

  const [startTime, setStartTime] = useState("");
  const [endTime, setEndTime] = useState("");
  const [timeBetweenClasses, setTimeBetweenClasses] = useState(null);
  const [timesCopy, setTimesCopy] = useState([]);
  // const [privateClassSingleValueOne2Three, setPrivateClassSingleValueOne2Three] = useState({});
  /**
  *  私教课1v1统一设置价格
  */
  const privateClassOne2OneSetting = (value, record) => {
    setPrivateClassSingleValueOne2One({})
    setPrivateClassValueOne2One(value)
  }

  /**
  *  私教课1v2统一设置价格
  */
  const privateClassOne2TwoSetting = (value, record) => {
    setPrivateClassSingleValueOne2Two({})
    setPrivateClassValueOne2Two(value)
  }

  /**
  *  私教课1v3统一设置价格
  */
  // const privateClassOne2ThreeSetting = (value,record)  =>{
  //   setPrivateClassSingleValueOne2Three({})
  //   setPrivateClassValueOne2Three(value)
  // }

  /**
   * 私教课1v1单个设置价格
   * @param {*} value 
   * @param {*} record 
   */
  const privateSingleOne2OneClassSetting = (value, record) => {
    let _privateClassSingleValueOne2One = { ...privateClassSingleValueOne2One }
    _privateClassSingleValueOne2One[record.id] = value
    setPrivateClassSingleValueOne2One(_privateClassSingleValueOne2One)
  }

  /**
   * 私教课1v1单个设置价格
   * @param {*} value 
   * @param {*} record 
   */
  const privateSingleOne2TwoClassSetting = (value, record) => {
    let _privateClassSingleValueOne2Two = { ...privateClassSingleValueOne2Two }
    _privateClassSingleValueOne2Two[record.id] = value
    setPrivateClassSingleValueOne2Two(_privateClassSingleValueOne2Two)
  }

  /**
   * 私教课1v1单个设置价格
   * @param {*} value 
   * @param {*} record 
   */
  // const privateSingleOne2ThreeClassSetting = (value,record) =>{
  //   let _privateClassSingleValueOne2Three={...privateClassSingleValueOne2Three}
  //   _privateClassSingleValueOne2Three[record.id]=value
  //   setPrivateClassSingleValueOne2Three(_privateClassSingleValueOne2Three)
  // }
  const privateClasscolumns = [
    {
      title: '课程名称',
      dataIndex: 'courseName',
      render: text => <><Tag color="blue">私教</Tag><span>{text}</span></>
    },
    {
      title: '课程类型',
      dataIndex: 'type',
      render: text => <span>私教</span>
    },
    // {
    //   title: '教练',
    //   dataIndex: 'coachName',
    //   render: text => <span>教练</span>
    // },
    {
      title: <><span>每节课收费</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={privateClassOne2OneSetting} />&nbsp;&nbsp;元/人</>,
      dataIndex: 'costPerClassPerson1to1',
      render: (text, record) => <><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        1对1</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={value => privateSingleOne2OneClassSetting(value, record)} value={privateClassSingleValueOne2One[record.id] || privateClassValueOne2One} />&nbsp;&nbsp;元/人</>
    },
    {
      title: <><span>每节课收费</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={privateClassOne2TwoSetting} />&nbsp;&nbsp;元/人</>,
      dataIndex: 'costPerClassPerson1to2',
      render: (text, record) => <><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        1对2</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={value => privateSingleOne2TwoClassSetting(value, record)} value={privateClassSingleValueOne2Two[record.id] || privateClassValueOne2Two} />&nbsp;&nbsp;元/人</>
    },
    // {
    //   title: <><span>每节课收费</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={privateClassOne2ThreeSetting}/>&nbsp;&nbsp;元/人</>,
    //   dataIndex: 'costPerClassPerson1to3',
    //   render: (text,record) => <><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    //     1对3</span>&nbsp;&nbsp;&nbsp;<InputNumber min={0} onChange={value=>privateSingleOne2ThreeClassSetting(value,record)} value={privateClassSingleValueOne2Three[record.id]||privateClassValueOne2Three}/>&nbsp;&nbsp;元/人</>
    // },
  ];
  useEffect(() => {
    if (dispatch) {
      dispatch({
        type: 'cubePrivate/fetchShopList',
        payload: {
          userId: db.get("user").userId
        }
      })
      dispatch({
        type: 'cubePrivate/fetchCoach',
        payload: {
          userId: db.get("user").userId
        }
      })
    }
  }, []);
  const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 5,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 12,
      },
      md: {
        span: 12,
      },
    },
  };
  const submitFormLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 12,
        offset: 5,
      },
    },
  };

  const onFinish = async () => {
    const values = await form.validateFields();
    if (values.timeBetweenClasses) {
      values.timeBetweenClasses = 30;
    }
    if (values.date) {
      values.startDate = moment(values.date).format('YYYY-MM-DD');
      values.endDate = moment(values.date).format('YYYY-MM-DD');
      delete values.date;
    }
    if (values.startTime) {
      values.startTimeHour = moment(values.startTime).format('HH');
      values.startTimeMinute = moment(values.startTime).format('mm');
      delete values.startTime;
    }
    if (values.endTime) {
      values.endTimeHour = moment(values.endTime).format('HH');
      values.endTimeMinute = moment(values.endTime).format('mm');
      delete values.endTime;
    }
    let courseBOList = [];
    if (privateClassKeys && privateClassKeys.length > 0) {
      privateClassKeys.map((item) => {
        let coursesDTO = {
          courseId: item
        }
        if (privateClassSingleValueOne2One) {
          if (privateClassSingleValueOne2One[item]) {
            coursesDTO['sellPrice1V1'] = privateClassSingleValueOne2One[item]
          } else if (privateClassValueOne2One) {
            coursesDTO['sellPrice1V1'] = privateClassValueOne2One
          }
        } else if (privateClassValueOne2One) {
          coursesDTO['sellPrice1V1'] = privateClassValueOne2One
        }

        if (privateClassSingleValueOne2Two) {
          if (privateClassSingleValueOne2Two[item]) {
            coursesDTO['sellPrice1V2'] = privateClassSingleValueOne2Two[item]
          } else if (privateClassValueOne2Two) {
            coursesDTO['sellPrice1V2'] = privateClassValueOne2Two
          }
        } else if (privateClassValueOne2Two) {
          coursesDTO['sellPrice1V2'] = privateClassValueOne2Two
        }

        // if(privateClassSingleValueOne2Three){
        //   if(privateClassSingleValueOne2Three[item]){
        //     coursesDTO['sellPrice1V3']=privateClassSingleValueOne2Three[item]
        //   }else if(privateClassValueOne2Three){
        //     coursesDTO['sellPrice1V3']=privateClassValueOne2Three
        //   }
        // }else if(privateClassValueOne2Three){
        //   coursesDTO['sellPrice1V3']=privateClassValueOne2Three
        // }
        courseBOList.push(coursesDTO);
      })
    }
    values.weeks = [2, 3, 4, 5, 6, 7, 1];
    values.courseBOList = courseBOList;
    dispatch({
      type: 'cubePrivate/saveSchedule',
      payload: values,
    })
  };

  /**
   * 更改选中的课程
   */
  const selectCoursesSupportedCardDTOS = (record, selected, type) => {

  }

  const changeCoursesSupportedCardDTOS = (selectedRowKeys, type) => {
    setPrivateClassKeys(selectedRowKeys)
  }
  const onDateChange = (date, dateString) => {
    console.log(date, dateString);
    dispatch({
      type: 'cubePrivate/classTableInfoList',
      payload: {
        type: '2',
        classType: '3',
        startDate: dateString,
        endDate: dateString,
        coachId: db.get("user").userId
      }
    }).then(data => {
      setTimesCopy(data);
    })
  }

  return (
    <PageHeaderWrapper>
      <Form
        style={{
          marginTop: 8,
        }}
        form={form}
        name="basic"
        initialValues={{ coachId: db.get("user").userId }}
      >
        <Card bordered={false}>
          <FormItem
            {...formItemLayout}
            label="教练"
            name="coachId"
            rules={[
              {
                required: true,
                message: '请选择教练',
              },
            ]}
          >
            <Select style={{ width: '100%' }} placeholder="请选择">
              {
                coachList && coachList.map((item, index) => <Select.Option value={item.userId} key={index}>{item.name}</Select.Option>)
              }
            </Select>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="场馆"
            name="venueId"
            rules={[
              {
                required: true,
                message: '请选择场馆',
              },
            ]}
          >
            <Select style={{ width: '100%' }} placeholder="请选择" onChange={(value) => {
              dispatch({
                type: 'cubePrivate/selectAllCourse',
                payload: {
                  classType: '3',
                  coachId: db.get("user").userId,
                  venueId: value
                },
              })
            }}>
              {
                shopList && shopList.map((item, index) => <Select.Option value={item.id} key={index}>{item.name}</Select.Option>)
              }
            </Select>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="开课日期"
            name="date"
            rules={[
              {
                required: true,
                message: '请选择开课日期',
              },
            ]}
          >
            <DatePicker style={{ width: '100%' }} onChange={onDateChange} />
          </FormItem>
          <FormItem
            {...formItemLayout} kai
            label="最早开课时间"
            name="startTime"
            rules={[
              {
                required: true,
                message: '请选择最早开课时间',
              },
            ]}
          >
            <TimePicker format={format} style={{ width: '100%' }} />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="最晚开课时间"
            name="endTime"
            rules={[
              {
                required: true,
                message: '请选择最晚开课时间',
              },
            ]}
          >
            <TimePicker format={format} style={{ width: '100%' }} />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="约课间隔时间"
            name="timeBetweenClasses"
            rules={[
              {
                required: true,
                message: '请选择约课间隔时间',
              },
            ]}
            valuePropName="checked"
          >
            <Checkbox>
              30分钟
            </Checkbox>
          </FormItem>
          {/* <FormItem
            {...formItemLayout}
            label="每周安排"
            name="weeks"
            rules={[
              {
                required: true,
                message: '请选择约课间隔时间',
              },
            ]}
          >
             <Checkbox.Group>
              <Checkbox value={2}>周一</Checkbox>
              <Checkbox value={3}>周二</Checkbox>
              <Checkbox value={4}>周三</Checkbox>
              <Checkbox value={5}>周四</Checkbox>
              <Checkbox value={6}>周五</Checkbox>
              <Checkbox value={7}>周六</Checkbox>
              <Checkbox value={1}>周日</Checkbox>
            </Checkbox.Group>
          </FormItem> */}
          <FormItem
            {...formItemLayout}
            label="单节课可约人数上限"
            name="maximumAttendance"
            rules={[
              {
                required: true,
                message: '请选择单节课可约人数上限',
              },
            ]}
          >
            <Select placeholder="请选择">
              <Select.Option value={1}>1</Select.Option>
              <Select.Option value={2}>2</Select.Option>
              {/* <Select.Option value={3}>3</Select.Option> */}
            </Select>
          </FormItem>
        </Card>
        <Card title='排班记录' bordered={false} style={{ marginTop: 24 }}>
          <div style={{ display: 'flex', flexWrap: 'wrap' }}>
            {
              timesCopy.map((time) => {
                return <div className={styles.card}>
                  <div>{`${time.openingTimeHour}:${time.openingTime}~${time.endTime}`}</div>
                  <div>{time?.courseName}</div>
                  <div>{time?.venueName}</div>
                </div>
              })
            }
          </div>
        </Card>
        <Card title="课程信息" bordered={false} style={{ marginTop: 24 }}>
          <Table
            rowKey="id"
            pagination={false}
            columns={privateClasscolumns}
            dataSource={courseList}
            rowSelection={{
              selectedRowKeys: privateClassKeys,
              onSelect: (record, selected) => {
                selectCoursesSupportedCardDTOS(record, selected)
              },
              onChange: (selectedRowKeys, selectedRows) => {
                changeCoursesSupportedCardDTOS(selectedRowKeys, 'private')
              }
            }}
          />
        </Card>
        <Affix offsetBottom={10}>
          <Button type="primary" onClick={onFinish} loading={submitting}>
            提交
          </Button>
          <Button
            style={{
              marginLeft: 8,
            }}
            onClick={() => window.history.back()}
          >
            返回
          </Button>
        </Affix>
      </Form>
    </PageHeaderWrapper>
  );
};

export default connect(({ loading, cubePrivate }) => ({
  shopList: cubePrivate.shopList,
  coachList: cubePrivate.coachList,
  siteList: cubePrivate.siteList,
  courseList: cubePrivate.courseList,
  submitting: loading.effects['cubePrivate/saveSchedule'],
}))(SavePrivate);

